<template>
	<view class="mph100 bf">
		<view class="pos_f">
			<view class="plr30 ptb20">历史异常</view>
			<view class="table_h plr30 ft24 tac">
				<view class="table_th bf">
					<view class="table_td">日期</view>
					<view class="table_td">异常类型</view>
				</view>
			</view>
		</view>
		<view class="table_w plr30 pt150 tac">
			<view class="table_b">
				<block v-for="item in loadList" :key="item.id">
					<view class="table_tr">
						<view class="table_td ptb20">{{ item.stime | formatTime }}</view>
						<view class="table_td ptb20">{{ item.alarm }}</view>
					</view>
				</block>
			</view>
			<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0"><view class="c9 pt20">暂无异常记录</view></view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>
	</view>
</template>

<script>
import loadMore from '@/mixins/loadMore'
import { alarmList } from '@/api/admin.js'
export default {
	name: 'alarmList',
	// mixins: [loadMore],
	data() {
		return {
			showTime: false,
			deviceId: '',
			info: {},
      page: 1,
      pageLength: 0,
      limit: 20,
      loadMoreText: '',
      totalPage: '',
      loadList: [],
      loadText: {
      	loadmore: '轻轻上拉',
      	loading: '努力加载中',
      	nomore: '实在没有了'
      },
      loadStatus: 'loadmore'
		}
	},
  onPullDownRefresh() {
  	this.page = 1;
  	this.loadData();
  },
  onReachBottom() {
  	if (this.pageLength == this.limit) {
  		this.page++;
  		this.loadMoreText = 'loading';
  		this.loadData();
  	} else {
  		this.loadMoreText = 'noMore';
  	}
  },
	onLoad(e) {
    console.log(e,'值')
		this.deviceId = e.deviceId
    console.log(this.deviceId)
    this.loadData()
	},
	methods: {
		async loadData() {
			const res = await alarmList({
				pageNum: this.page,
				pageSize: this.limit,
				devId: this.deviceId
			})
			this.showTime = true
			this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]
			this.pageLength = res.rows.length
			this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
		}
	}
}
</script>

<style lang="scss" scoped>
.table_th {
	display: flex;
	word-wrap: break-word;
	background-color: #deeafd;
	.table_td {
		display: inline-block;
		width: 345upx;
		padding: 20upx 10upx;
	}
}

.table_w {
	.table_tr {
		display: flex;
		word-wrap: break-word;
		&:nth-child(2n-1) {
			background-color: #f7faff;
		}
		&:nth-child(2n) {
			background-color: #f8f8f8;
		}
		.table_td {
			display: inline-block;
			width: 345upx;
			padding: 20upx 10upx;
		}
	}
	.table_b {
		border-top: none;
	}
	.table_tr {
		// border-bottom: 1px solid #e4e7ed;
		font-size: 24upx;
	}
	.table_tr:last-child {
		border: none;
	}
}
</style>
